@{
    @using ldc_mvc_closing_hwk.Models.Database
    var articleContent = ViewBag.ArticleContent as ArticleContent;
    var articleMeta = ViewBag.ArticleMeta as ArticleMetum;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文章编辑</title>
    <link href="~/layui/css/layui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

    @{
        var msg = TempData["Msg"] as string;

        if (!String.IsNullOrEmpty(msg))
        {
            <script>
                alert("@msg");
            </script>
        }
    }

    <form class="layui-form layui-form-pane" action="/article/edit" method="post">

        <div style="padding: 24px">
            <!-- 文章信息 -->
            <h2>修改文章 [id: @articleMeta.Id]</h2>

            <div class="layui-form-item">
                <label class="layui-form-label"> <span class="layui-font-red">*</span> 文章标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" autocomplete="off" placeholder="请输入" lay-verify="required"
                           lay-reqtext="标题不能为空" class="layui-input" value="@articleMeta.Title">
                </div>
            </div>
            <div class="layui-form-item">
                <!-- 文章来源 -->
                <div class="layui-inline">
                    <label class="layui-form-label">文章来源</label>
                    <div class="layui-input-inline">
                        <input name="source_name" type="text" placeholder="为空不设置来源" class="layui-input" value="@articleMeta.SourceName">
                    </div>
                </div>

                <!-- 发布时间 -->
                <div class="layui-inline">
                    <label class="layui-form-label">发布时间</label>
                    <div class="layui-input-inline">
                        <input name="release_time" type="text" class="layui-input" id="ID-laydate-type-datetime-1"
                               placeholder="yyyy-MM-dd HH:mm:ss" value="@articleMeta.ReleaseTime">
                    </div>
                </div>

            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">头图选择</label>
                    <div class="layui-input-block">
                        <select name="head_image" lay-search>
                            <option value="">默认图片</option>
                            @{
                                var imgFiles = ViewBag.ImageFiles;
                                if (imgFiles != null)
                                {
                                    foreach (var imageFile in imgFiles)
                                    {
                                        var isSels = articleMeta.CoverImage == @imageFile ? "select" : null;

                                        <option value="@imageFile" @isSels> @imageFile</option>
                                    }
                                }
                            }
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">摘要</label>
                <div class="layui-input-block">
                    <textarea name="summary" placeholder="请输入摘要(留空时提交将自动选取内容)" class="layui-textarea"
                              lay-verify="fill_summary|required" lay-reqtext="摘要填充失败, 请手动填写">@articleMeta.Summary</textarea>
                </div>
            </div>



            <!-- 文章内容 -->

            <div class="layui-form-item" pane>
                <label class="layui-form-label">内容类型</label>
                <div class="layui-input-block">
                    @{
                        <input type="radio" name="content_type" value="text" title="文本">
                        <input type="radio" name="content_type" value="link" title="链接">
                        
                        var radioSel = articleContent.ContentType == "text" ? 0 : 1;

                        <script>
                            $('input[name="content_type"]').get(radioSel).checked = true;
                        </script>
                    }
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label"> <span class="layui-font-red">*</span> 文章内容</label>
                <div class="layui-input-block">
                    <textarea id="content_data" name="content" placeholder="请输入内容或链接" class="layui-textarea" rows="25" lay-verify="required"
                              lay-reqtext="内容不能为空">@articleContent.Data</textarea>
                </div>
            </div>


            <div class="layui-form-item">
                <button class="layui-btn" lay-submit lay-filter="demo2">发布</button>
            </div>
        </div>

    </form>

    <script src="~/layui/layui.js"></script>
    <script>
        layui.use(['form'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;

            laydate.render({
                elem: '#ID-laydate-type-datetime-1',
                value: new Date(Date.now()),
                type: 'datetime',
                fullPanel: true // 2.8+
            });

            form.verify({
                // 检查文章内容类型和内容是否符合
                checkArticleContent: function (value, elm) {

                },

                fill_summary: function (value, elm) {
                    if (value != '') {
                        return;
                    }
                    let content = document.getElementById('content_data').value;
                    if (content === '') {
                        return '内容为空时无法填充摘要';
                    }
                    if (value === '') {
                        elm.value = content.slice(0, 100);
                        return '摘要已进行更新, 再次提交以确认';
                    }

                }
            });
            // 提交事件
            form.on('submit(demo2)', function (data) {
                var field = data.field; // 获取表单字段值

                // layer.alert(JSON.stringify(field), {
                //     title: '当前填写的字段值'
                // });


                // contentType单选按钮
                let contentType = document.getElementsByName('contentType').value;


                // return false; // 阻止默认 form 跳转
            });
        });
    </script>

</body>

</html>